<template>
  <div>
    <div class="img_top">
      <img width="100%" height="195.41px" src="../../static/img/page_time.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">标签</div>
      </div>
      <P class="about_p">内心没有阳光的人温暖不了别人。用心写博客，知识不是高谈阔论，是现实点点滴滴的积累。</P>
    </div>
    <div class="about_end">
      <div class="end_left">
        <div class="block" style="margin-top:50px;">

          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              <div @click="findBlogByTagUid(activity.uid)"><a>{{activity.content}}</a></div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="end_right">
        <div class="block">

          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(blog,index) in blogData" :key="index" :timestamp="blog.timestamp"
            >
              <span>{{blog.createTime}}</span>
              <el-card>
                <h4 @click="goToInfo(blog.uid)">{{blog.title}}</h4>
                <el-tag type="danger">原创</el-tag>
                <el-tag>{{blog.author}}</el-tag>
                <el-tag type="success">{{blog.sortName}}</el-tag>
                <el-tag type="warning">{{blog.content}}</el-tag>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
export default {

  data() {
    return {
      reverse: true,
      activities: [],
      blogData: [],
    };
  },
  methods:{
    getAllTag:function () {
      var _this = this;
      axios.get("/api/blogs/findAllTag").then(function (res) {
        _this.activities = res.data;
      })
    },
    findBlogByTagUid:function (uid) {
      var _this = this;
      axios.get("/api/blogs/findBlogByTagUid/"+uid).then(function (res) {
        _this.blogData = res.data;
      })
    },
    goToInfo:function (uid) {
      this.$router.push('/bloginfo/'+uid);
    }
  },
  mounted() {
    var uid = this.$route.params.uid;
    this.getAllTag();
    this.findBlogByTagUid(uid);
  }
};
</script>

<style>
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f6f6f6;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 2000px;
  background-color: #f6f6f6;
  padding-top: 20px;
}
.about_btn {
  position: absolute;
  left: 160px;
  top: 310px;
}
.about_p {
  float: right;
  margin-right: 30px;
  line-height: 40px;
}
.about_mess1 {
  width: 100px;
  height: 40px;
  background-color: #000000;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.about_mess2 {
  width: 100px;
  height: 40px;
  background-color: #3a6ab5;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.end_left {
  width: 230px;
  height: 380px;
  position: absolute;
  left: 159px;
}
.end_right {
  width: 970px;
  height: 1000px;
  position: absolute;
  right: 160px;
}
</style>
